<template>
  <div class="cash-out">
    <div class="tabs-header">
      <!-- 入金 -->
      <div
        class="tab"
        :class="{'active': tabActive === 1}"
        @click="switchTab(1)"
      >{{$t('bank.income')}}</div>
      <!-- 出金 -->
      <div
        class="tab"
        :class="{'active': tabActive === 2}"
        @click="switchTab(2)"
      >{{$t('bank.expenditure')}}</div>
      <!-- 货币转换 
      <div
        class="tab"
        :class="{'active': tabActive === 3}"
        @click="switchTab(3)"
      >{{$t('bank.curcon')}}</div>
	  -->
    </div>
    <div class="tabs-content">
      <div
        class="tab1 tabs-c"
        v-show="tabActive === 1"
      >
        <i-form class="currency-form">
          <FormItem
            :label="$t('bank.amount')"
            class="order-item"
          >
            <i-input
              type="number"
              :placeholder="$t('bank.income')"
              v-model="inMoney"
              style="width: 83%;"
            >
              <div
                class="handle-group"
                slot="suffix"
              >
                <span
                  class="adjust up"
                  @click="amountCalcu(1, 1)"
                ></span>
                <span
                  class="adjust down"
                  :style="{cursor: inMoney === 0 ? 'not-allowed' : 'pointer'}"
                  @click="amountCalcu(1, 0)"
                ></span>
              </div>
            </i-input>
            <div class="cur-suffix">RMB</div>
          </FormItem>
          <div class="form-submit">
            <!-- <el-button plain>{{$t('bank.comfirmIncome')}}</el-button> -->
            <i-button
              type="primary"
              @click="outPayment(1)"
            >{{$t('bank.comfirmIncome')}}</i-button>
          </div>
        </i-form>
      </div>
      <div
        class="tab2 tabs-c"
        v-show="tabActive === 2"
      >
        <i-form class="currency-form">
          <FormItem
            :label="$t('bank.amount')"
            class="order-item"
          >
            <i-input
              type="number"
              :placeholder="$t('bank.expenditure')"
              v-model="outMoney"
              style="width: 83%;"
            >
              <div
                class="handle-group"
                slot="suffix"
              >
                <span
                  class="adjust up"
                  @click="amountCalcu(2, 1)"
                ></span>
                <span
                  class="adjust down"
                  :style="{cursor: outMoney === 0 ? 'not-allowed' : 'pointer'}"
                  @click="amountCalcu(2, 0)"
                ></span>
              </div>
            </i-input>
            <div class="cur-suffix">RMB</div>
          </FormItem>
          <div class="form-submit">
            <!-- <el-button plain>{{$t('bank.comfirmIncome')}}</el-button> -->
            <i-button
              type="primary"
              @click="outPayment(2)"
            >{{$t('bank.comfirmExpenditure')}}</i-button>
          </div>
        </i-form>
      </div>
      <div
        class="tab3 tabs-c"
        v-show="tabActive === 3"
      >
        <div class="capital-form">
          <h3 class="capital-title">{{$t('capital.enableBalance')}}</h3>
          <div
            class="currency"
            v-for="item in moneylist"
            :key="item.currencyId"
          >
            <span class="label">{{item.currencyId===1 ? $t('menu.RMB') : (item.currencyId===3 ? $t('menu.USD') : $t('menu.HKD'))}}</span>
            <span class="sum">{{item.accountBalance}}</span>
          </div>
        </div>
        <div class="right-form">
          <div class="transition-tips">{{$t('capital.transTips')}}</div>
          <!-- 货币转换 -->
          <i-form class="conversion-form">
            <FormItem
              :label="convertType === 1 ?  $t('menu.RMB') : $t('menu.USD')"
              class="order-item"
            >
              <!-- 转出币种--人民币 -->
              <i-input
                type="number"
                :placeholder="$t('menu.RMB')"
                v-model="RMBValue"
                v-show="convertType === 1"
              >
                <div
                  class="handle-group"
                  slot="suffix"
                >
                  <span
                    class="adjust up"
                    @click="sumUpDown(1)"
                  ></span>
                  <span
                    class="adjust down"
                    :style="{cursor: RMBValue === 0 ? 'not-allowed' : 'pointer'}"
                    @click="sumUpDown(0)"
                  ></span>
                </div>
              </i-input>
              <!-- 转出币种--美元 -->
              <i-input
                type="number"
                :placeholder="$t('menu.USD')"
                v-model="USDValue"
                v-show="convertType === 2"
              >
                <div
                  class="handle-group"
                  slot="suffix"
                >
                  <span
                    class="adjust up"
                    @click="sumUpDown(1)"
                  ></span>
                  <span
                    class="adjust down"
                    :style="{cursor: USDValue === 0 ? 'not-allowed' : 'pointer'}"
                    @click="sumUpDown(0)"
                  ></span>
                </div>
              </i-input>
            </FormItem>
            <!-- 转换按钮 -->
            <div
              class="convert-btn"
              @click="switchCurrency"
              :title="$t('trade.switchCur')"
            >
						<div  style="width:40px;height: 25px;border-radius: 5px;background: #bbb;text-align: center;line-height: 25px;margin-top: 4px;">  <svg-icon icon-class="convert" /></div>
<!--              <svg-icon icon-class="convert" /> -->
            </div>
            <FormItem
              :label="convertType === 1 ? $t('menu.USD') : $t('menu.RMB')"
              class="order-item"
            >
              <!-- 转入币种--美元 -->
              <i-input
                type="number"
                :placeholder="$t('menu.USD')"
                :value="RightUSD"
                readonly
                v-show="convertType === 1"
              />
              <!-- 转入币种--人民币 -->
              <i-input
                type="number"
                :placeholder="$t('menu.RMB')"
                :value="RightRMB"
                readonly
                v-show="convertType === 2"
              />
            </FormItem>
          </i-form>
          <div class="form-submit">
            <i-button
              type="primary"
              @click="submitConvert"
            >{{$t('bank.curbtn')}}</i-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Form, FormItem, Input, Button } from "iview";
import * as trade from "../../../request/trade";
import { throttle } from "../../../utils/auth";
import {
	Notification
} from 'element-ui';
export default {
  name: "CashOut",
  components: {
    FormItem,
    IForm: Form,
    IInput: Input,
    IButton: Button
  },
  computed: {
    moneylist () {
      return this.$store.getters.moneylist;
    },
    paritiesList () {
      return this.$store.getters.paritiesList;
    },
    userinfo () {
      return this.$store.getters.userinfo;
    },
	gtyuming () {      
		return this.$store.getters.gtyuming;
	}
  },
  data () {
    return {
      tabActive: 1,
      inMoney: 0, // 入金
      outMoney: 0, // 出金
      convertType: 1, // 转换类型：1人民币转美元2美元转人民币
      RMBValue: "", // 人民币转换值
      RightRMB: "", // 右侧展示人民币
      USDValue: "", // 美元转换值
      RightUSD: "", // 右侧展示美元
      RMBRatio: 700, // 人民币比率
      USDRatio: 100 // 美元比率
    };
  },
  watch: {
    paritiesList: {
      handler (val) {
        val.forEach(ele => {
          // 人民币
          if (ele.ID === "1") {
            this.RMBRatio = ele.Ratio * 1;
          }
          // 美元
          if (ele.ID === "3") {
            this.USDRatio = ele.Ratio * 1;
          }
        });
      },
      deep: true,
      immediate: true
    },
    RMBValue (val) {
      // 人民币变化，美元跟着变化
      this.RightUSD = ((this.USDRatio * val) / this.RMBRatio).toFixed(4);
      // console.log("当前转换后美元:", this.RightUSD);
    },
    USDValue (val) {
      // 美元值变化，人民币跟着计算变化
      this.RightRMB = ((this.RMBRatio * val) / this.USDRatio).toFixed(4);
      // console.log("当前转换后人民币:", this.RightRMB);
    }
  },
  beforeMount () {
    // 初始化获取币种汇率
    this.initParities();
    // console.log(this.moneylist);
  },
  methods: {
    initParities () {
      // 请求货币汇率
      trade.wsSend("22;");
    },
    switchTab (i) {
      // tab切换
      this.tabActive = i;
    },
    // 计算出金入金金额增减
    amountCalcu (type, isAdd) {
      if (type === 1 && this.inMoney === 0 && !isAdd) {
        return;
      }

      if (type === 2 && this.outMoney === 0 && !isAdd) {
        return;
      }
      // 入金
      if (type === 1) {
        if (isAdd) {
          this.inMoney += 1;
        } else {
          this.inMoney -= 1;
        }
      }
      // 出金
      if (type === 2) {
        if (isAdd) {
          this.outMoney += 1;
        } else {
          this.outMoney -= 1;
        }
      }
    },
    outPayment (type) {
      let that = this;
      const shell = require('electron').shell
      console.log(this.userinfo)
	  console.log(this.gtyuming)
      // 出入金跳转
      // 入金
      if (type === 1) {
		  var patrn = /^[0-9]{1,20}$/;
		  
		  if (!patrn.exec(this.inMoney)) {
		    Notification({
		        title: '错误',
		        position: 'bottom-right',
		        message: '请输入整数',
		        offset: 120,
		        type: 'error'
		    });
		  	return
		  }
		  /*
		  if(parseInt(this.inMoney)%10==0||parseInt(this.inMoney)%10==1){
			Notification({
			    title: '错误',
			    position: 'bottom-right',
			    message: '请输入尾数为2~9的数',
			    offset: 120,
			    type: 'error'
			});
		  	return
		  }
		  */
		  
        // this.inMoney
        const inURL = `http://` + `${this.gtyuming}/churu/rujin1.php?id=${this.userinfo.uId}&pass=${this.userinfo.token}&hb_id=1&yh_lb=1&num=${this.inMoney}&zhongduan=1`
		console.log(inURL);
        shell.openExternal(inURL)



	  /*
	  axios.get(inURL).then(res => {
        console.log('获取当前品种列表为：', res)
        if (res.data.code === 0) {
          
          Notification({
              title: '成功',
              position: 'bottom-right',
              message: res.data.msg,
              offset: 120,
              type: 'success'
          });
        } else {
          console.log(res.msg);
          Notification({
              title: '错误',
              position: 'bottom-right',
              message: res.data.msg,
              offset: 120,
              type: 'error'
          });
        }
      });
	  */

      }

      // 出金
      if (type === 2) {
        // this.outMoney
        const outURL = `http://` + `${this.gtyuming}/churu/chujin.php?id=${this.userinfo.uId}&pass=${this.userinfo.token}&hb_id=1&yh_lb=1&num=${this.outMoney}&zhongduan=1`
		console.log(outURL);
        // shell.openExternal(outURL)


        axios.get(outURL).then(res => {
        console.log('获取当前品种列表为：', res)
        if (res.data.code === 0) {
          
          Notification({
              title: '成功',
              position: 'bottom-right',
              message: res.data.msg,
              offset: 120,
              type: 'success'
          });
        } else {
          console.log(res.msg);
          Notification({
              title: '错误',
              position: 'bottom-right',
              message: res.data.msg,
              offset: 120,
              type: 'error'
          });
        }
      });
      }
    },
    switchCurrency () {
      // 货币兑换切换
      this.convertType === 1 ? (this.convertType = 2) : (this.convertType = 1);
    },
    // 货币兑换增减按钮
    sumUpDown (type) {
      // 上限按钮增减数值
      if (type === 1) {
        // 加，无上限
        // 人民币
        if (this.convertType === 1) {
          this.RMBValue++;
        }

        // 美元
        if (this.convertType === 2) {
          this.USDValue++;
        }
      }

      if (type === 0) {
        // 减
        if (this.convertType === 1 && this.RMBValue <= 0) {
          this.RMBValue = 0;
          return;
        } else {
          this.RMBValue--;
        }

        if (this.convertType === 2 && this.USDValue <= 0) {
          this.USDValue = 0;
          return;
        } else {
          this.USDValue--;
        }
      }
    },
    // 货币兑换请求
    submitConvert: throttle(function () {
      let that = this;
      // 先判断是从那种货币转成哪种货币
      let sendFeild = null;
      // 人民币
      if (this.convertType === 1) {
        sendFeild = `33;1;3;${this.RMBValue};${this.$store.getters.userip}`;
      }

      // 美元
      if (this.convertType === 2) {
        sendFeild = `33;3;1;${this.USDValue};${this.$store.getters.userip}`;
      }
      this.$store.dispatch("panel/playTipsAudio", 6);
      this.$store.dispatch("bar/changeLoadings", {
        status: true,
        msg: this.$t("tip.converWait")
      });
      // 货币转换（33） 发送：33;币种1;币种2;币种1金额;IP;
      trade.wsSend(sendFeild);
      window.setTimeout(() => {
        that.RMBValue = 0;
        that.USDValue = 0;
      }, 800);
    }, 1000)
  }
};
</script>


<style lang="scss" scoped>
.cash-out {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-left: 2px;
  .tabs-content {
    // 出入金form
    .currency-form {
      padding: 16px 12px 0 8px;
      border-right: #919b9c 1px solid;
      .cur-suffix {
        margin-left: 12px;
      }
      .form-submit {
        display: flex;
        flex-direction: row-reverse;
      }
    }

    // 资金详情表单样式
    .capital-form {
      position: relative;
      margin-left: 2px;
      width: 300px;
      height: 100%;
      border-right: #919b9c 1px solid;
      padding: 4px;

      .capital-title {
        font-weight: normal;
        text-align: center;
        margin-top: 22px;
        font-size: 18px;
        margin-bottom: 14px;
      }

      .currency {
        padding-left: 60px;
        margin-bottom: 10px;
        display: flex;

        .label {
          width: 60px;
        }

        .sum {
          margin-left: 30px;
        }
      }
    }
    // 货币转换
    .right-form {
      border-right: none;
      width: 460px;
      margin-left: 28px;
      .transition-tips {
        margin-top: 24px;
        margin-bottom: 22px;
        color: #ff3c39;
      }
      .conversion-form {
        display: flex;
        .convert-btn {
          font-size: 16px;
          cursor: pointer;
          margin: 0 20px;
        }
      }
    }
  }
}
</style>
